<template>
  <div>
    <svg-icon name="refresh" size="30" color="red"></svg-icon>
    <svg-icon name="lanhua" size="30" color="yellow"></svg-icon>
    <svg-icon name="music_off" size="30" color="red"></svg-icon>
    <svg-icon name="qiye" size="30" color="black"></svg-icon>

    <div></div>
  </div>
</template>

<script setup>
let str = `<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1656381772559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6635" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css">@font-face { font-family: feedback-iconfont; src: url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff2?t=1630033759944") format("woff2"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.woff?t=1630033759944") format("woff"), url("//at.alicdn.com/t/font_1031158_u69w8yhxdu.ttf?t=1630033759944") format("truetype"); }
</style></defs><path d="M725.333333 1024H298.666667a128 128 0 0 1-128-128V128a128 128 0 0 1 128-128h426.666666a128 128 0 0 1 128 128v768a128 128 0 0 1-128 128zM298.666667 85.333333a42.666667 42.666667 0 0 0-42.666667 42.666667v768a42.666667 42.666667 0 0 0 42.666667 42.666667h426.666666a42.666667 42.666667 0 0 0 42.666667-42.666667V128a42.666667 42.666667 0 0 0-42.666667-42.666667z" p-id="6636" ></path><path d="M512 853.333333m-42.666667 0a42.666667 42.666667 0 1 0 85.333334 0 42.666667 42.666667 0 1 0-85.333334 0Z" p-id="6637" fill="#dbdbdb"></path><path d="M554.666667 213.333333h-85.333334a42.666667 42.666667 0 0 1 0-85.333333h85.333334a42.666667 42.666667 0 0 1 0 85.333333z" p-id="6638" fill="#dbdbdb"></path></svg>`;
const svgTitle = /<svg([^>+].*?)>/;
const clearHeightWidth = /(width|height)="([^>+].*?)"/g;

const hasViewBox = /(viewBox="[^>+].*?")/g;

const clearReturn = /(\r)|(\n)/g;
let idPerfix = '';
const dirent = 'phone'
const temp = str.replace(clearReturn, str).replace(svgTitle, ($1, $2) => {
  
  let width = 0;
  let height = 0;
  let content = $2.replace(clearHeightWidth, (s1, s2, s3) => {
    if (s2 === "width") {
      width = s3;
    } else if (s2 === "height") {
      height = s3;
    }
    return "";
  });
  if (!hasViewBox.test($2)) {
    content += `viewBox="0 0 ${width} ${height}"`;
  }
  return `<symbol id="${idPerfix}-${dirent.replace(
    ".svg",
    ""
  )}" ${content}>`;
});
</script>
